import { useCallback } from "react";
import i18n from "i18n-js";
import Taro, { useRouter } from "@tarojs/taro";
import PageContainer from "@/components/PageContainer";
import { DynamicColors, GStyleSheet } from "@/utils/DarkMode";
import { View } from "@tarojs/components";
import { GButton } from "@/components/GButton";
import findIcon from "../assets/icon_find.png";
import locationIcon from "../assets/wifi_icon_position.png";
import TipItem from "../selectWifi/components/TipItem";

const dstyles = GStyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
    background: DynamicColors.normalBackgroundColor,
    padding: "32rpx",
    boxSizing: "border-box",
    borderTop: "1rpx solid rgba(0,0,0,0.1)",
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between'
  },
  title: {
    fontSize: 18,
    color: DynamicColors.normalTextColor,
    textAlign: "center",
    marginBottom: "40rpx",
  },
  desc: {
    width: "100%",
    padding: "40rpx 80rpx",
    boxSizing: "border-box",
    backgroundColor: "#fafafa",
  },
});

const tips = [
  { icon: findIcon, text: 'CONFIG_FAIL_TIP_1' },
  { icon: locationIcon, text: 'BLE_ADD_FAIL_TIP_2' },
];


const FailTipPage = () => {
  const styles = dstyles.useDynamicStyle();
  const { params } = useRouter<{ noRetry: string }>()
  const { noRetry } = params;
  const showRetry = noRetry !== '1';

  const goBack = useCallback(() => {
    Taro.navigateBack({ delta: 1 });
  }, []);

  return (
    <PageContainer title={i18n.t('ADD_FAIL')}>
      <View style={styles.container}>
        <View>
          <View style={styles.desc}>
            {tips.map((tip) => (
              <TipItem {...tip} key={tip.text} text={i18n.t(tip.text)} />
            ))}
          </View>
        </View>
        {showRetry && <GButton text={i18n.t('RETRY')} onPress={goBack} />}
      </View>
    </PageContainer>
  );
};

export default FailTipPage;
